<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="com.mongodb.client.MongoCursor,org.bson.Document" %>
<%@ page import="java.util.Date,java.text.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>教学材料模板</title>
</head>
<body>
	<%MongoCursor<Document> templateList = (MongoCursor<Document>)request.getAttribute("result");%>
	<jsp:include page="navbar.jsp" />
	<div class="container-fluid">
		<div class="row mt15">
			<div class="col-md-10 col-md-offset-1">
			<%if(!templateList.hasNext()) {%>
				<div class="col-md-6 col-md-offset-3">
					<div class="panel panel-default">
	                	<div class="panel-body">	                		
							<h5 class="text-center text-muted">暂无教学材料模板</h5>
						</div>
					</div>
				</div>
			<%} else {
					while(templateList.hasNext()) {
						Document document = templateList.next();
						String name = document.getString("name");
						String typename = document.getString("typename");
						Date date = document.getDate("createtime"); 
						SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd HH:mm");
						String createtime = formatter.format(date);
				%>
				<div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
					<div class="panel" style="border-bottom:4px solid #337ab7;box-shadow: -5px -5px 5px #eee;">
						<div class="panel-body text-center">
		                  <div class="clearfix discover">
		                   	<div class="pull-left text-info">
		                                                                                    类型: <%=typename %>
		                     </div>	
		                     <div class="pull-right">
		                     	<a href="/jspbighomework/downloadServlet?filename=<%=name%>">
		                     		<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="下载文件">
										<em class="fa fa-download"></em>
									</button>
		                     	</a>	  	                     	            			                  	
								<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="查看详情" onclick='showDetail("<%=name %>","<%=typename %>","<%=createtime %>")'>
									<em class="fa fa-search"></em>
								</button>
		                     </div>		                                       
		                  </div>
		                  <div class="mt38 mb38">
		                  	  <a class="text-muted file-manage">
			                     <h4><em class="fa fa-file-o"></em> <%=name %></h4>
			                  </a>
		                  </div>	
		                  <div class="row">
			                  <div class="pull-left" style="margin-left:15px;">
			                  	<em class="fa fa-clock-o text-muted"> <%=createtime %></em>
			                  </div>		                  	
		                  </div>           
		               </div>
					</div>
				</div>
				<%} %>
				<%} %>
			</div>
		</div>
	</div>
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="top:120px">
		<div class="modal-dialog" style="width: 480px">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						教学材料模板信息
					</h4>
				</div>
				<div class="modal-body">
				 	<div style="padding: 5px 15px">					 	
				 		<p><em class="fa fa-file-o fontsize20 fontcolor"></em><span id="name" class="ml20 fontsize16"></span></p>
				 		<p class="mt20"><em class="fa fa-list-alt fontsize20 fontcolor"></em><span id="typename" class="ml20 fontsize16"></span></p>
				 		<P class="mt20"><em class="fa fa-clock-o fontsize20 fontcolor"></em><span id="createtime" class="ml20 fontsize16"></span></P>
				 	</div>
				</div>
			</div>
		</div>
	</div>
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(function () { $("[data-toggle='tooltip']").tooltip(); });
	
		$("#myModal").modal("hide"); //加载页面首先隐藏模态框，指向模态框的ID
		function showDetail(name,typename,createtime) {
			$("#myModal").modal("show");//显示模态框
			document.getElementById('name').innerHTML = "模板名称： "+name;
			document.getElementById('typename').innerHTML = "所属类型： "+typename;
			document.getElementById('createtime').innerHTML = "上传时间： "+createtime;
		}      
	</script>
</body>
</html>